<style scoped>
  .Central {
    width: 100%;
    height: 1000px;
  }
  .bm-view {
    width: 100%;
    height: 950px;
  }
</style>

<template>
  <div>
    <!--导航栏-->
    <div class="Central">
      <el-menu align="center" class="el-menu-demo" mode="horizontal"
               background-color="rgba(147, 240, 123, 0.34)" text-color="rgba(255, 120, 0, 1)"
               active-text-color="rgba(0, 30, 255, 1)">
        <el-menu-item align="center" index="1" @click="LendMap">地块地图</el-menu-item>
        <el-menu-item align="center" index="2" @click="LenTable">地块表格</el-menu-item>
        <el-menu-item align="center" index="3" @click="LendRegis">地块预约</el-menu-item>
      </el-menu>
      <!--弹出表格-->
      <el-dialog
        align="center"
        title="地块列表"
        center
        width="60%"
        :visible="show"
        :before-close="CloseWindow"
        v-dialogDrag>
        <MapInfo :plydata="plydata" ref="mapInfo"></MapInfo>
      </el-dialog>
      <!--地图-->
      <baidu-map
        class="bm-view"
        @mousemove="syncPolygon"
        @dblclick="DoubleClick"
        @rightdblclick="Rightdblclick"
        @maptypechange="MapType"
        @rightclick="newPolygon"
        @ready="MapHandler"
        :center="this.center"
        :zoom="this.zoom"
        :min-zoom=10
        :double-click-zoom="false"
        :scroll-wheel-zoom="true"
        :continuous-zoom="true"
        @moving="syncCenterAndZoom"
        @moveend="syncCenterAndZoom"
        @zoomend="syncCenterAndZoom"
        @click="paintPolygon">

        <!--行政区-->
        <bm-boundary name="三亚市"
                     :mass-clear=false
                     @mouseover="enterSanYa"
                     @mouseout="outSanYa"
                     :strokeWeight="2"
                     strokeStyle="solid"
                     :fillColor=this.SanYaColor
                     strokeColor="rgba(91, 4, 13, 1)"></bm-boundary>
        <bm-boundary name="三亚市吉阳区"
                     @mouseover="enterJiYang"
                     :mass-clear=false
                     @mouseout="outJiYang"
                     strokeStyle="dashed"
                     :strokeWeight="2"
                     :fillColor=this.JiYangColor
                     strokeColor="none"></bm-boundary>
        <bm-boundary name="三亚市海棠区"
                     @mouseover="enterHaiTang"
                     @mouseout="outHaiTang"
                     strokeStyle="dashed"
                     :mass-clear=false
                     :strokeWeight="2"
                     :fillColor=this.HaiTangColor
                     strokeColor="none"></bm-boundary>
        <bm-boundary name="三亚市天涯区"
                     :mass-clear=false
                     @mouseover="enterTianYa"
                     @mouseout="outTianYa"
                     strokeStyle="dashed"
                     :strokeWeight="2"
                     :fillColor=this.TianYaColor
                     strokeColor="none"></bm-boundary>
        <bm-boundary name="三亚市崖州区"
                     @mouseover="enterYaZhou"
                     @mouseout="outYaZhou"
                     :mass-clear=false
                     strokeStyle="dashed"
                     :strokeWeight="2"
                     :fillColor=this.YaZhouColor
                     strokeColor="none"></bm-boundary>
      </baidu-map>

    </div>
  </div>

</template>

<script>
  //引入map实例
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import MapInfo from './MapInfoTable.vue'
  import {
    getOneCover,
    saveCover,
    getAllCover,
    getCouList,
    getStuList,
    UpStuCou,
    deleteStu,
    findLikeStus
  } from '@/api/userApi' //导入接口工具
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    //组件注册
    components: {
      BaiduMap,
      MapInfo,
    },
    data() {
      return {
        showSaveState: false,
        show: false,
        center: {lng: 109.44899533628981, lat: 18.3405664516992},//中心经纬度经度： 109.44899533628981 , 维度： 18.3405664516992
        zoom: 12,
        Overlay: [],
        SanYaColor: "none",
        JiYangColor: 'none',
        YaZhouColor: "none",
        TianYaColor: "none",
        HaiTangColor: "none",
        plydata: []
      }
    },
    methods: {

      //双击定位
      Position(){
        map.clearOverlays();
        var new_point = new BMap.Point(109.44899533628981,18.3405664516992);
        var marker = new BMap.Marker(new_point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        map.panTo(new_point);

      },


      //关闭弹窗
      CloseWindow(done) {
        done();//关闭对话
        this.show = !this.show
      },
      //地块表格
      LenTable() {
        this.show = !this.show
      },
      /*===============================================业====务====事====件=============================================*/
      //地块地图
      LendMap(){
        this.$parent.test('hello');
        this.$router.push({name: 'Home',params:{ }});
      },
      //地块预约
      LendRegis(){
        this.$router.push({name: 'baiduMap2',params:{ }});
      },
      //显示地块列表
      showSave() {
        console.log("params", this.$route.params.Cover)
        var that = this;//将vue当前的this再次赋值，在下面才能继续调用
        getAllCover().then(response => {
          const data = response.data//获取后台响应的原始数据
          this.plydata = data.data  //收集到全局
          console.log( "data",data)
          boundary();
          function boundary() {
            var conun = data.data.length
            //   var conun = that.plydata.length
            for (var j = 0; j < conun; j++) {
              (function (index) {
                var ply = new BMap.Polygon(that.plydata[j].mapCover, {
                  fillColor: that.plydata[j].color,
                  strokeWeight: 2,
                  strokeOpacity:0.4,
                  fillOpacity:0.4,
                  strokeColor: that.plydata[j].color
                }); //建立多边形覆盖物
                map.addOverlay(ply);  //添加覆盖物
                var infoWindow = new BMapLib.SearchInfoWindow(map, that.plydata[j].name+"(双击进入编辑)<br>ff", {
                  title: that.plydata[j].name, //标题
                  width: 80, //宽度
                  height: 60, //高度
                  panel: "panel", //检索结果面板
                  enableAutoPan: true, //自动平移
                  searchTypes: []
                });
                var cover = that.plydata[j]  //获取当前索引的覆盖物信息
                //添加鼠标滚轮事件
                map.addEventListener("zoomend", function (e) {
                  //条件：缩放几倍小于12就隐藏覆盖物,否则就显示
                  if (that.zoom < 12) {
                    ply.hide()
                  } else {
                    ply.show()
                  }
                })
                //鼠标经过事件
                ply.addEventListener('mouseover', function () {
                  ply.setFillOpacity(0.6)
                  ply.setStrokeOpacity(0.6)
                  //鼠标移动事件
                  ply.addEventListener("mousemove", function (e) {
                    // that.show = !that.show; //that.show 就是 this.show ,指向data中的show
                    infoWindow.open(e.point);

                  })//mousemove
                })//mouseover
                //鼠标离开事件
                ply.addEventListener('mouseout', function (e) {
                  ply.setFillOpacity(0.4)
                  ply.setStrokeOpacity(0.4)
                //  infoWindow.close(); //关窗
                  infoWindow.hide(); //关窗

                })//mouseout

                //双击事件
                ply.addEventListener('dblclick', function () {
                  that.$router.push({name: 'editMap',params:{ cover:cover}});
                })//dblclick

              })(j)

            }//for
          }

        })
      },

      /*=====================================================属====性====事====件===============================================*/

      //离开多边形触发
      outPolygon() {
        //还原
        this.polygonOpacity = 0.7
      },
      //进入三亚
      enterSanYa() {
      },
      //离开三亚
      outSanYa() {

      },
      //进入崖州
      enterYaZhou() {
        if (this.zoom < 12) {
          this.YaZhouColor = "rgba(15, 206, 69, 0.49)"
        }
      },
      //离开崖州
      outYaZhou() {
        this.YaZhouColor = "none"
      },
      //进入天涯
      enterTianYa() {
        if (this.zoom < 12) {
          this.TianYaColor = "rgba(255, 128, 0, 0.76)"
        }
      },
      //离开天涯
      outTianYa() {
        this.TianYaColor = "none"
      },
      //进入海棠
      enterHaiTang() {
        if (this.zoom < 12) {
          this.HaiTangColor = "rgba(0, 64, 255, 0.66)"

        }
      },
      //离开海棠
      outHaiTang() {
        this.HaiTangColor = "none"
      },
      //进入吉阳
      enterJiYang() {
        if (this.zoom < 12) {
          this.JiYangColor = "rgba(255, 0, 140, 0.44)"
        }
      },
      //离开吉阳
      outJiYang() {
        this.JiYangColor = "none"
      },
      /*=========================监====听====事====件==================================================================================*/
      //mousemove 监听鼠标位移
      syncPolygon(e) {
        window.e = e  //存入全局
        //缩放级别大于11，鼠标再次滑动，机会清除所有行政区颜色
        if (this.zoom > 11) {
          this.JiYangColor = 'none',
            this.YaZhouColor = "none",

            this.TianYaColor = "none",
            this.HaiTangColor = "none"
        }
      },

      //左键单击 click
      paintPolygon(e) {
        console.log("鼠标点击处经度：", e.point.lng, ",", "维度：", e.point.lat)

      },
      //右键单击事件  rightclick
      newPolygon(e) {

      },

      //地图缩放结束后触发
      syncCenterAndZoom(e) {
        //缩放级别大于11后，还原所有行政区颜色
        if (this.zoom > 11) {

          this.SanYaColor = "none",
            this.JiYangColor = 'none',
            this.YaZhouColor = "none",
            this.TianYaColor = "none",
            this.HaiTangColor = "none"
          //缩放级别小于12后，显示所有行政区颜色
        } else if (this.zoom < 12) {

          this.YaZhouColor = "rgba(15, 206, 69, 0.49)"
          this.TianYaColor = "rgba(255, 128, 0, 0.76)"
          this.HaiTangColor = "rgba(0, 64, 255, 0.66)"
          this.JiYangColor = "rgba(255, 0, 140, 0.44)"
        }

        const {lng, lat} = e.target.getCenter()
        //  console.log("经度：", lng, ",", "维度：", lat)
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
      },

      //左键双击  dblclick
      DoubleClick() {
        console.log("双击了")
      },
      Rightdblclick() {
        console.log("双击了",)
      },
      //地图类型变化时触发
      MapType() {
        console.log("地图类型变化了 ")
      },
      //地图初始化
      MapHandler({BMap, map}) {
        var that = this
        window.map = map;//将map变量存储在全局
        map.setCenter("三亚市");  // 设置地图显示的城市 此项是必须设置的
        var bdary = new BMap.Boundary();//创建行政区域搜索的对象实例

        //鼠标滚轮事件
        map.addEventListener("zoomend", function (e) {
          console.log("缩放级别", e.target.Va)

        })

        //行政区遮罩
        function getBoundary() {
          //三亚市遮罩+++++++++
          bdary.get("三亚市", function (rs) {       //获取行政区域
            var EN_JW = "180, 90;";         //东北角
            var NW_JW = "-180,  90;";       //西北角
            var WS_JW = "-180, -90;";       //西南角
            var SE_JW = "180, -90;";        //东南角
            //4.添加环形遮罩层
            var ply1 = new BMap.Polygon(rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW, {
              strokeColor: "none",  //线颜色
              fillColor: "rgba(244, 244, 244, 1)",  //填充颜色
              fillOpacity: 1,     //线透明度
              strokeWeight: 0.005,       //线宽度

            }); //建立多边形覆盖物
            //鼠标进入遮罩触发
            ply1.disableMassClear()//禁止被清除
            ply1.addEventListener("mouseover", function () {

            })
            map.addOverlay(ply1);
          });

        }

        setTimeout(function () {
          getBoundary();
        }, 100);

      }//MapHandler
    },
    mounted() {
      this.showSave()
    }
  }
</script>

